<script setup>
import { onMounted, ref, computed } from 'vue'
import { getLsit,delData ,editRole,addRole,getRoletDeatil} from '@/api/roleControl.js'
import { getSort } from '@/api/departmentControl.js'
import { ElMessage } from 'element-plus'

const dataList = ref({
  page: 1,
  size: 10,
  total: null,
  roleName:''
})
const tableList = ref([{}])
const getLsitAPI = async () => {
  const res = await getLsit(dataList.value)
  console.log(res)
  tableList.value = res.data
  dataList.value.total = res.total
  dataList.value.page = res.currentPage
  dataList.value.size = res.size
}
onMounted(() => {
  getLsitAPI()
})
const addForm = ref({
  roleName: '', //角色名
  authoritySymbol: '', //权限字符，
  sequence: null, //角色顺序
  status: null
})
// 编辑
const edit = async (id) => {
  const res = await getRoletDeatil(id)
  console.log(res)
  addForm.value = res.data
  getSortAPI()
  isShowDialog.value = true
}
const showTitle = computed(() => {
  return addForm.value.id ? '修改角色' : '添加角色'
})
const isShowDialog = ref(false)
// 点击添加按钮
const add = () => {
  getSortAPI()
  isShowDialog.value = true
}
// 获取排序
const sortList = ref([])
const getSortAPI = async () => {
  const res = await getSort()
  console.log(res)
  sortList.value = res.data
}
const checkList = ref(['selected and disabled', 'Option A'])
const checkList2 = ref(['selected and disabled', 'Option A'])
// 弹层--取消按钮
const cancelBtn = () => {
  isShowDialog.value = false
  addForm.value = {}
} 
// 删除
const confirmEvent = async (id) => {
  // console.log('confirm!')
  await delData(id)
  ElMessage.success('删除成功')
  // 重新获取数据列表
  getLsitAPI()
}
// 弹层确认
const dialogList = ref(null)
const BtnOK = async () => {
  console.log(addForm.value)
  await dialogList.value.validate()
  if (addForm.value.id) {
    // 编辑
    await editRole(addForm.value)
    console.log(addForm.value)
    ElMessage.success('角色修改成功')
  } else {
    // 新增
    await addRole(addForm.value)
    ElMessage.success('角色添加成功')
  }
  cancelBtn()
  getLsitAPI()

}
const search = ()=>{
  dataList.value.page= 1
  getLsitAPI()
}
</script>
<template>
  <div class="container">
    <div class="navTop">
      <el-form label-width="100px">
        <el-row :gutter="24" style="padding-top: 10px">
          <el-col :span="6">
            <el-form-item label="角色名称:">
              <el-input placeholder="请输入" size="large" v-model="dataList.roleName"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="角色状态:">
              <el-select placeholder="请选择" size="large" style="wdith: 260px" v-model="dataList.status">
                <el-option value="1">启用</el-option>
                <el-option value="0">禁用</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item class="search">
              <el-button
                type="primary"
                round
                size="large"
                style="background-color: #05cc95; width: 100px"
                @click="search"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item class="reset">
              <el-button plain round size="large">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row :gutter="20">
          <el-col :span="16"></el-col>
         
        </el-row> -->
      </el-form>
    </div>
    <div class="content">
      <div class="choice"></div>
      <div class="body">
        <el-button type="primary" round size="large" class="add" @click="add">添加角色</el-button>
        <el-table
          style="width: 100%"
          :data="tableList"
          :default-sort="{ prop: 'sequence', order: 'descending' }"
        >
          <el-table-column align="center" label="角色编号" type="index" :width="200">
          </el-table-column>
          <el-table-column align="center" label="角色名称" prop="roleName"></el-table-column>
          <el-table-column align="center" label="权限字符" prop="authoritySymbol"></el-table-column>
          <el-table-column
            align="center"
            label="显示顺序"
            prop="sequence"
            sortable
          ></el-table-column>
          <el-table-column align="center" label="状态" prop="status">
            <span>{{ status === 0 ? '正常' : '禁用' }}</span>
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
          <el-table-column align="center" label="操作">
            <template v-slot="{ row }">
              <el-button type="text" @click="edit(row.id)">修改</el-button>
            <el-button type="text">数据权限</el-button>
            <el-popconfirm
                width="220"
                confirm-button-text="确认"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="确定要删除吗？"
                @confirm="confirmEvent(row.id)"
                @cancel="cancelEvent"
              >
                <template #reference>
                  <el-button type="text">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            :page-size="[10, 20, 30, 40]"
            :small="small"
            :background="primary"
            layout="total,prev,pager,next,sizes,jumper"
            :total="dataList.total"
          >
          </el-pagination>
        </el-row>
      </div>
    </div>
    <el-dialog :title="showTitle" v-model="isShowDialog">
      <el-form
        label-width="120px"
        :label-position="right"
        :model="addForm"
        :rules="rules"
        ref="dialogList"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色名称" prop="superiorName">
              <el-input placeholder="请输入" v-model="addForm.roleName"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限字符：" prop="deptName">
              <el-input placeholder="请输入" v-model="addForm.authoritySymbol"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色顺序：" prop="sort">
              <el-select placeholder="请选择" v-model="addForm.sequence">
                <el-option v-for="item in sortList" :key="item.id" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态：" v-model="addForm.status">
              <el-row>
                <el-col :span="12">
                  <el-radio label="1" style="margin-left: 25px">正常</el-radio>
                </el-col>
                <el-col :span="12">
                  <el-radio label="0" style="margin-left: 25px">停用</el-radio>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-left: 70px">
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
            >首页</el-checkbox
          >
          <el-divider style="margin: 0px" />
        </el-row>
        <el-row style="margin-left: 70px">
          <el-checkbox
            v-model="checkAll"
            >用户管理</el-checkbox
          >
          <el-divider style="margin: 0px" />
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="查看" />
            <el-checkbox label="编辑" />
            <el-checkbox label="新增" />
            <el-checkbox label="删除" />
            <el-checkbox label="禁用" />
            <el-checkbox label="导入" />
            <el-checkbox label="批量处理" />
            <el-checkbox label="搜索" />
          </el-checkbox-group> 
        </el-row>
        <el-row  style="margin-left: 80px">
          <el-checkbox>用户详情二</el-checkbox>
        </el-row>
        <el-row style="margin-left: 70px">
          <el-checkbox
            v-model="checkAll"
            >用户组管理</el-checkbox
          >
          <el-divider style="margin: 0px" />
          <el-checkbox-group v-model="checkList2">
            <el-checkbox label="查看" />
            <el-checkbox label="编辑" />
            <el-checkbox label="新增" />
            <el-checkbox label="删除" />
            <el-checkbox label="禁用" />
            <el-checkbox label="导入" />
            <el-checkbox label="批量处理" />
            <el-checkbox label="搜索" />
          </el-checkbox-group> 
        </el-row>
        <el-form-item>
          <el-button style="margin-left: 120px" @click="cancelBtn">取消</el-button>
          <el-button style="background-color: #05cd95; color: #fff" @click="BtnOK">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.navTop {
  background-color: #fff;
  .el-form-item {
    display: block;
    width: 80%;
    margin-left: 30px;
  }
}

.content {
  // padding: 0px 20px;
  .choice {
    height: 40px;
    .userButton {
      margin-left: 200px;
      margin-top: 33px;
    }
  }
  .body {
    background-color: #fff;
  }
  .choiceList {
    display: inline-block;
    margin-left: 50px;
    margin-top: 50px;
  }

  .feature {
    margin-top: 10px;
  }
}
.el-form-item {
  // display: block;
  width: 80%;
  margin-left: 30px;
}
.el-input {
  margin-left: 25px;
}
.el-select {
  margin-left: 25px;
  width: 100%;
}

.el-date-picker {
  width: 50%;
}

::v-deep .el-form-item--large .el-form-item__content {
  width: 45%;
  margin-left: 25px;
}

.search {
  margin-top: 25px;
  margin-left: 120px;
}
.reset {
  margin-top: 25px;
  margin-left: 100px;
}

.add {
  background-color: #05cc95;
  margin-top: 20px;
  width: 100px;
  margin-left: 40px;
  margin-bottom: 20px;
  border: 1px solid #05cc95;
}
</style>
